<template>
  <div class="singerList">
    <div class="list-content">
      <ul>
        <li v-for="item in singerList" :key="item.singer_id" @click="singerPage(item)">
          <img v-lazy="item.singer_pic" />
          <div class="detail">
            <span class="singer-name"> {{ item.singer_name }}</span>
            <span class="like" @click.stop="toggleFavorite(item)">{{getFavoriteText(item)}}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { singerMixin } from '../../common/js/mixin'
export default {
  mixins: [singerMixin],
  props: {
    singerList: {
      type: Array,
      required: true
    }
  },
  computed: {
    ...mapState(['singerImg'])
  },
  methods: {
    ...mapMutations(['setSinger', 'setType', 'setSingerImg', 'setSingerMid']),
    singerPage (singerDate) {
      // 改变vuex中存储的歌手信息
      // 歌手名
      this.setSinger(singerDate)
      // // 类别
      this.setType('歌手')
      // 跳转到歌手详情页
      const mid = singerDate.singer_mid
      this.$router.push('/singer/mid=' + mid)
    }
  }
}
</script>

<style lang="stylus" scoped>
.singerList {
  // height: calc( 100% - 146px );
  // overflow: hidden;
  .list-content {
    height: 100%;
    padding: 10px 20px 0 20px;
    color: #6d6d6d;
    li {
      width: 100%;
      display: flex;
      padding-bottom: 15px;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 20px;
      }
      .detail {
        display: flex;
        flex: 1;
        justify-content :space-between;
        align-items:center;
        span {
          padding: 6px;
          font-weight: 700;
        }
        .singer-name {
          max-width: 120px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .like {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
